<template>
  <div>
    <el-container>
      <el-header>
        <h2>
          <b>订单管理</b>
        </h2>
      </el-header>
      <el-main>
        <el-form :inline="true" :model="order" ref="order" class="demo-form-inline" align="center">
          <el-form-item label="订单编号" prop="no">
            <el-input v-model="order.no" placeholder="订单编号"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="orderTime">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="order.orderTime"
              type="datetimerange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd hh:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="支付方式" prop="payType">
            <el-select v-model="order.payType" placeholder="请选择状态">
              <el-option label="全部" value="0"></el-option>
              <el-option label="余额" value="1"></el-option>
              <el-option label="支付宝" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否预约" prop="arrange">
            <el-select v-model="order.arrange" placeholder="请选择状态">
              <el-option label="全部" value="0"></el-option>
              <el-option label="预约" value="1"></el-option>
              <el-option label="即时" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="order.status"
              placeholder="请选择状态"
              multiple
              collapse-tags
              style="width:250px"
            >
              <el-option label="全部" value="0"></el-option>
              <el-option label="待分配" value="1"></el-option>
              <el-option label="配送中" value="2"></el-option>
              <el-option label="已超时" value="3"></el-option>
              <el-option label="已送达（未评价）" value="4"></el-option>
              <el-option label="已完成（已评价）" value="5"></el-option>
              <el-option label="已删除" value="6"></el-option>
              <el-option label="待确认" value="7"></el-option>
              <el-option label="待审核" value="8"></el-option>
              <el-option label="已赔偿" value="9"></el-option>
              <el-option label="已取消（未付款）" value="10"></el-option>
              <el-option label="已取消（无接单）" value="11"></el-option>
              <el-option label="待取件" value="12"></el-option>
              <el-option label="已取消" value="13"></el-option>
              <el-option label="赔付50%" value="14"></el-option>
              <el-option label="赔付100%" value="15"></el-option>
              <el-option label="已完成（赔付50%）" value="16"></el-option>
              <el-option label="已完成（赔付100%）" value="17"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="page=1;onSubmit()">查询</el-button>
            <el-button @click="resetForm('order')">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table
          :data="tData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="40" fixed></el-table-column>
          <el-table-column label="序号" type="index" width="50" fixed></el-table-column>
          <el-table-column prop="no" label="订单编号" width="200" fixed></el-table-column>
          <el-table-column prop="userId" label="用户账号" width="160" :formatter="formatUser"></el-table-column>
          <!-- <el-table-column prop="sendInfo" label="寄件信息" width="400"></el-table-column>
          <el-table-column prop="recInfo" label="收件信息" width="400"></el-table-column>-->
          <el-table-column prop="riderId" label="骑手账号" width="160" :formatter="formatRider"></el-table-column>
          <el-table-column prop="orderTime" label="下单时间" width="160"></el-table-column>
          <el-table-column prop="acceptTime" label="接单时间" width="160"></el-table-column>
          <el-table-column prop="getTime" label="收货时间" width="160"></el-table-column>
          <el-table-column prop="totalMoney" label="总价(元)" width="160"></el-table-column>
          <el-table-column prop="discountId" label="优惠券" width="160" :formatter="formatDis"></el-table-column>
          <el-table-column prop="realMoney" label="实际价格(元)" width="160"></el-table-column>
          <el-table-column prop="payType" label="支付方式" width="160" :formatter="formatPay"></el-table-column>
          <el-table-column prop="distance" label="距离(公里)" width="160"></el-table-column>
          <el-table-column prop="weight" label="重量（千克）" width="160"></el-table-column>
          <el-table-column prop="arrange" label="是否预约" width="160" :formatter="formatArr"></el-table-column>
          <el-table-column prop="arrangeTime" label="预约时间" width="160"></el-table-column>
          <el-table-column prop="expectTime" label="预计时长(分)" width="160"></el-table-column>
          <el-table-column prop="status" label="状态" width="160" :formatter="formatStatus"></el-table-column>
          <el-table-column label="操作" fixed="right" width="160">
            <template slot-scope="scope">
              <el-button @click="view(scope.row)" type="primary" size="mini">查看</el-button>
              <el-button
                @click="handleClick(scope.row)"
                type="warning"
                size="mini"
                v-if="scope.row.status==8"
              >审核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br />
        <el-pagination
          background
          layout="prev, pager, next"
          :total="totalNum"
          :page-size="10"
          align="center"
          :current-page="page"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-main>
    </el-container>

    <el-dialog
      title="订单详情"
      :visible.sync="dialogFormVisibleView"
      :modal="false"
      :close-on-click-modal="false"
    >
      <el-form
        :inline="true"
        :model="viewForm"
        ref="viewForm"
        class="demo-form-inline"
        align="center"
      >
        <el-form-item label="寄件信息" prop="sendInfo">
          <el-input v-model="viewForm.sendInfo" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="收件信息" prop="recInfo">
          <el-input v-model="viewForm.recInfo" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="items" border style="width: 100%">
        <el-table-column prop="categoryId" label="物品种类" :formatter="formatCate"></el-table-column>
        <el-table-column prop="weight" label="物品重量(千克)"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="price" label="价格（元）"></el-table-column>
        <el-table-column prop="ensurePrice" label="保价价格（元）"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      title="选择赔偿方案"
      :visible.sync="dialogFormVisibleChange"
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <el-form
        :inline="true"
        :model="changeForm"
        ref="changeForm"
        class="demo-form-inline"
        align="center"
        :rules="formrules"
      >
        <el-form-item label="赔偿方案" prop="planId">
          <el-select v-model="changeForm.planId" style="margin-left: 20px;" placeholder="选择赔偿方案">
            <el-option label="不赔偿" value="4"></el-option>
            <el-option label="赔偿50%" value="14"></el-option>
            <el-option label="赔偿100%" value="15"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="onClose('changeForm')">取 消</el-button>
          <el-button type="primary" @click="changeStatus('changeForm')">确 认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
import Qs from "qs";
export default {
  data() {
    return {
      order: {
        no: "",
        payType: "",
        orderTime: "",
        arrange: "",
        status: "",
      },
      viewForm: {
        sendInfo: "",
        recInfo: "",
      },
      changeForm: {
        id: "",
        planId: "",
      },
      formrules: {
        planId: [
          { required: true, message: "请选择赔偿方案", trigger: "blur" },
        ],
      },
      users: [],
      riders: [],
      discounts: [],
      categorys: [],
      tData: [],
      items: [],
      multipleSelection: [],
      totalNum: 0,
      page: 1,
      formLabelWidth: "120px",
      dialogFormVisibleView: false,
      dialogFormVisibleChange: false,
    };
  },
  created() {
    Axios.get("/tfss/admin/discount/list").then((r) => {
      if (r.data.code == 200) {
        this.discounts = r.data.data;
        Axios.get("/tfss/admin/category/list").then((r) => {
          if (r.data.code == 200) {
            this.categorys = r.data.data;
            Axios.get("/tfss/admin/rider/list").then((r) => {
              if (r.data.code == 200) {
                this.riders = r.data.data;
                Axios.get("/tfss/admin/user/list").then((r) => {
                  if (r.data.code == 200) {
                    this.users = r.data.data;
                    this.onSubmit();
                  } else if (r.data.code == 403) {
                    this.$message.error("没有权限");
                  } else if (r.data.code == 703) {
                    this.$message.error("未登录");
                  } else if (r.data.code == 500) {
                    this.$message.error("系统繁忙，请稍后再试");
                  } else if (r.data.code == 704) {
                    this.$message.error("登录失效，请重新登录");
                  }
                });
              } else if (r.data.code == 403) {
                this.$message.error("没有权限");
              } else if (r.data.code == 703) {
                this.$message.error("未登录");
              } else if (r.data.code == 500) {
                this.$message.error("系统繁忙，请稍后再试");
              } else if (r.data.code == 704) {
                this.$message.error("登录失效，请重新登录");
              }
            });
          } else if (r.data.code == 403) {
            this.$message.error("没有权限");
          } else if (r.data.code == 703) {
            this.$message.error("未登录");
          } else if (r.data.code == 500) {
            this.$message.error("系统繁忙，请稍后再试");
          } else if (r.data.code == 704) {
            this.$message.error("登录失效，请重新登录");
          }
        });
      } else if (r.data.code == 403) {
        this.$message.error("没有权限");
      } else if (r.data.code == 703) {
        this.$message.error("未登录");
      } else if (r.data.code == 500) {
        this.$message.error("系统繁忙，请稍后再试");
      } else if (r.data.code == 704) {
        this.$message.error("登录失效，请重新登录");
      }
    });
  },
  mounted() {
    clearInterval(this.timer);
    this.timer = setInterval(this.onSubmit, 60000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    onSubmit() {
      Axios.get("/tfss/admin/order/listByPage", {
        params: {
          no: this.order.no,
          payType: this.order.payType,
          orderTime: this.order.orderTime,
          arrange: this.order.arrange,
          status: this.order.status,
          page: this.page,
        },
        paramsSerializer: (params) => {
          return Qs.stringify(params, { indices: false });
        },
      }).then((r) => {
        if (r.data.code == 200) {
          this.tData = r.data.data.records;
          this.totalNum = r.data.data.total;
        } else if (r.data.code == 403) {
          this.$message.error("没有权限");
        } else if (r.data.code == 703) {
          this.$message.error("未登录");
        } else if (r.data.code == 500) {
          this.$message.error("系统繁忙，请稍后再试");
        } else if (r.data.code == 704) {
          this.$message.error("登录失效，请重新登录");
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    onClose(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisibleChange = false;
    },
    view(row) {
      Axios.get("/tfss/admin/order/view", {
        params: {
          id: row.id,
        },
      }).then((r) => {
        if (r.data.code == 200) {
          this.viewForm.sendInfo = row.sendInfo;
          this.viewForm.recInfo = row.recInfo;
          this.items = r.data.data;
          this.dialogFormVisibleView = true;
        } else if (r.data.code == 403) {
          this.$message.error("没有权限");
        } else if (r.data.code == 703) {
          this.$message.error("未登录");
        } else if (r.data.code == 500) {
          this.$message.error("系统繁忙，请稍后再试");
        } else if (r.data.code == 704) {
          this.$message.error("登录失效，请重新登录");
        }
      });
    },
    changeStatus(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("确认通过审核?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              Axios.get("/tfss/admin/order/changeStatus", {
                params: this.changeForm,
                paramsSerializer: (params) => {
                  return Qs.stringify(params, { indices: false });
                },
              }).then((r) => {
                if (r.data.code == 200) {
                  this.$message({
                    type: "success",
                    message: "操作成功!",
                  });
                  this.onSubmit();
                  this.dialogFormVisibleChange = false;
                } else if (r.data.code == 403) {
                  this.$message.error("没有权限");
                } else if (r.data.code == 703) {
                  this.$message.error("未登录");
                } else if (r.data.code == 500) {
                  this.$message.error("系统繁忙，请稍后再试");
                } else if (r.data.code == 704) {
                  this.$message.error("登录失效，请重新登录");
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        } else {
          return false;
        }
      });
    },
    handleClick(row) {
      this.dialogFormVisibleChange = true;
      this.changeForm.id = row.id;
    },
    formatCate(row, column, cellValue) {
      for (const category of this.categorys) {
        if (cellValue == category.id) {
          return category.name;
        }
      }
    },
    formatUser(row, column, cellValue) {
      for (const user of this.users) {
        if (cellValue == user.id) {
          return user.account;
        }
      }
    },
    formatRider(row, column, cellValue) {
      if (cellValue == null || cellValue == "") {
        return "未接单";
      }
      for (const rider of this.riders) {
        if (cellValue == rider.id) {
          return rider.account;
        }
      }
    },
    formatDis(row, column, cellValue) {
      if (cellValue == null || cellValue == "") {
        return "未使用";
      }
      for (const discount of this.discounts) {
        if (cellValue == discount.id) {
          return discount.name;
        }
      }
    },
    formatArr(row, column, cellValue) {
      if (cellValue == "1") {
        return "预约单";
      } else if (cellValue == "2") {
        return "即时单";
      }
    },
    formatPay(row, column, cellValue) {
      if (cellValue == "1") {
        return "余额";
      } else if (cellValue == "2") {
        return "支付宝";
      }
    },
    formatStatus(row, column, cellValue) {
      if (cellValue == "1") {
        return "待分配(预约单)";
      } else if (cellValue == "2") {
        return "配送中";
      } else if (cellValue == "3") {
        return "已超时";
      } else if (cellValue == "4") {
        return "已送达（待评价）";
      } else if (cellValue == "5") {
        return "已完成（已评价）";
      } else if (cellValue == "6") {
        return "已删除";
      } else if (cellValue == "7") {
        return "待确认";
      } else if (cellValue == "8") {
        return "待审核";
      } else if (cellValue == "9") {
        return "已赔偿";
      } else if (cellValue == "10") {
        return "已取消（未付款）";
      } else if (cellValue == "11") {
        return "已取消（无接单）";
      } else if (cellValue == "12") {
        return "待取件";
      } else if (cellValue == "13") {
        return "已取消（无接单）";
      } else if (cellValue == "14") {
        return "赔付50%（待评价）";
      } else if (cellValue == "15") {
        return "赔付100%（待评价）";
      } else if (cellValue == "16") {
        return "已完成（赔付50%）";
      } else if (cellValue == "17") {
        return "已完成（赔付100%）";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      Axios.get("/tfss/admin/order/listByPage", {
        params: {
          no: this.order.no,
          payType: this.order.payType,
          orderTime: this.order.orderTime,
          arrange: this.order.arrange,
          status: this.order.status,
          page: val,
        },
        paramsSerializer: (params) => {
          return Qs.stringify(params, { indices: false });
        },
      }).then((r) => {
        if (r.data.code == 200) {
          this.tData = r.data.data.records;
          this.totalNum = r.data.data.total;
          this.page = val;
        } else if (r.data.code == 403) {
          this.$message.error("没有权限");
        } else if (r.data.code == 703) {
          this.$message.error("未登录");
        } else if (r.data.code == 500) {
          this.$message.error("系统繁忙，请稍后再试");
        } else if (r.data.code == 704) {
          this.$message.error("登录失效，请重新登录");
        }
      });
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  /* background-color: #b3c0d1; */
  color: #333;
  /* text-align: center; */
  line-height: 60px;
}
.el-main {
  /* background-color: #e9eef3; */
  color: #333;
  /* text-align: center; */
  /* line-height: 160px; */
}
</style>